<template>
  <f7-page class="qm-page">

    <!-- <div style="width:100%;padding: calc(20px * var(--ratio)) calc(32px * var(--ratio)); display: flex; justify-content: space-between;align-items: center; color: #000">
      <div class="left"><f7-link back><f7-icon f7="chevron_left" style="color: #000"></f7-icon></f7-link></div>
      <div class="title">首页</div>
      <div class="right"><f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link></div>
    </div> -->

    <f7-list class="qm-list">
      <qm-block>
        <template #title>
          <div class="platform-title">应用平台</div>
        </template>
        <div class="swiper-box">
          <f7-swiper class="swiper">
            <f7-swiper-slide v-for="item in 3" :key="item">
              <div class="slide-box">
                <img src="static/img/home/home-4/swiper.png" alt="" />
              </div>
            </f7-swiper-slide>
          </f7-swiper>
        </div>
      </qm-block>

      <qm-block title="常用功能">
        <div class="entry-list">
          <qm-entry v-for="(item, index) in entry" :key="index" :data="item" iconWidth="96"></qm-entry>
        </div>
      </qm-block>
    </f7-list>

    <f7-list class="qm-list">
      <qm-block title="资讯">
        <f7-link href="#" slot="after-title" style="color: var(--color-text-subtext)">
          更多资讯
          <f7-icon f7="chevron_right" style="font-size: var(--font-size-subcontent-2)"></f7-icon>
        </f7-link>
        <div class="consult">
          <qm-consult-list v-for="(item, index) in consult" :key="index" :data="item"
            :line="index !== consult.length - 1"></qm-consult-list>
        </div>
      </qm-block>
    </f7-list>

    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      entry: [
        {
          image: "static/img/home/home-4/entry-1.svg",
          title: "随机巡查",
          subtitle: "休闲任务",
          href: "/business/index",
        },
        {
          image: "static/img/home/home-4/entry-2.svg",
          title: "巡查任务",
          subtitle: "公告资讯",
        },
        {
          image: "static/img/home/home-4/entry-3.svg",
          title: "巡查轨迹",
          subtitle: "线上购物",
        },
        {
          image: "static/img/home/home-4/entry-4.svg",
          title: "任务派单",
          subtitle: "出售资金",
        },
      ],
      consult: [
        {
          image: "static/img/home/consult-1.png",
          title: "银行利率已经上调5%，将影响楼…",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "天津市滨海新区8项指标成为全…",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "开展照片征集活动通知",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "疫情防控不放松 个人防护第一位 进一步做好预防",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-2.png",
          title: "天津市滨海新区13项指标成为全国标杆",
          time: "2022-03-16  12:00",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.qm-page {
  background: var(--color-fill-background);

  .platform-title {
    font-size: calc(40px * var(--ratio));
    font-weight: 400;
  }

  .qm-list {
    background: #fff;
  }

.swiper-box {
  padding-top: 10px;
}
  .swiper {
    height: calc(300px * var(--ratio));
    border-radius: calc(16px * var(--ratio));
    overflow: hidden;
    box-shadow: 0 calc(20px * var(--ratio)) calc(30px * var(--ratio)) rgba(69, 122, 249, 0.3);

    .slide-box {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
      }
    }
  }

  .entry-list {
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
